<script setup lang="ts">
import { ref } from "vue";
import type { top } from "../../interface/index";

const flag = ref<boolean>(false);
const topList = ref<top.grid[]>([
  {
    text: "缴费",
    icon: "/static/top/licai.png",
  },
  {
    text: "阳光食堂",
    icon: "/static/top/chushimao.png",
  },
  {
    text: "缴费",
    icon: "/static/top/licai.png",
  },
  {
    text: "在线充值",
    icon: "/static/top/zhangshangchongzhi.png",
  },
  {
    text: "更多",
    icon: "category",
  },
]);

const topAllList = ref<top.grid[]>([
  {
    text: "用餐登记",
    icon: "/static/top/wenjian.png",
  },
  {
    text: "用餐记录",
    icon: "/static/top/yongcan.png",
  },
  {
    text: "通知",
    icon: "/static/top/xiaoxi.png",
  },
  {
    text: "动态",
    icon: "/static/top/quanzongdongtai.png",
  },
  {
    text: "投诉管理",
    icon: "/static/top/tousufankui.png",
  },
  {
    text: "投诉统计",
    icon: "/static/top/tongji9.png",
  },
  {
    text: "请假",
    icon: "/static/top/qingjia1.png",
  },
  {
    text: "学生请假审批",
    icon: "/static/top/xueshengqingjia.png",
  },
  {
    text: "老师请假",
    icon: "/static/top/qingjia.png",
  },
  {
    text: "老师请假审批",
    icon: "/static/top/banji.png",
  },
]);

function handleClick(item: top.grid): void {
  if (item.text === "更多") {
    flag.value = true;
  }
}
</script>

<template>
  <nut-popup v-model:visible="flag" position="top" round>
    <view style="background-color: white">
      <nut-grid style="width: 100%" :column-num="5">
        <nut-grid-item v-for="(item, index) in topAllList" :key="index">
          <template #text>
            <nut-ellipsis :content="item.text" direction="end"></nut-ellipsis>
          </template>
          <nut-icon :name="item.icon" />
        </nut-grid-item>
      </nut-grid>
    </view>
  </nut-popup>

  <view id="top-container">
    <nut-grid :column-num="5">
      <nut-grid-item
        v-for="(item, index) in topList"
        :key="index"
        :text="item.text"
        @click="handleClick(item)"
      >
        <nut-icon :name="item.icon" />
      </nut-grid-item>
    </nut-grid>
    <view id="notice-container">
      <view style="flex: 2; display: flex; align-items: center; justify-content: start">
        <nut-icon name="voice" size="30rpx"></nut-icon>提醒
      </view>
      <view
        style="
          flex: 7;
          display: flex;
          align-items: center;
          justify-content: start;
          font-size: 24rpx;
        "
      >
        没有新的待办事项
      </view>
      <view
        style="
          flex: 3;
          display: flex;
          align-items: center;
          justify-content: end;
          font-size: 24rpx;
          color: #1ec8c8;
        "
      >
        全部(0)
        <nut-icon name="rect-right" size="24rpx" />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss" src="./index.scss"></style>
